<template>
	<view class="login-page-wrapper">
		<view class="login-page">
			<view class="top-section">
				<view class="logo-container">
					<image class="logo" :src="logoPath" mode="widthFix"></image>
				</view>
				<view class="title-col">
					<view class="title">{{ title }}</view>
					<view class="subtitle">{{ subtitle }}</view>
				</view>
			</view>
			<view class="middle-section">
				<view class="login-row">
					<view class="login-btn" @click="goToRegister(0)" :disabled="checked===false">手机号注册/登录</view>
				</view>
				<view class="agreement">
					<u-checkbox-group @change="checkboxGroupChange()">
						<u-checkbox v-model="checked" shape="circle" active-color="#FFB607" size="30rpx"></u-checkbox>
					</u-checkbox-group>
					<text class="text text0">我已阅读并同意</text>
					<text class="text1" @click="goToRegister(1)">《用户协议》</text>
					<text class="text">和</text>
					<text class="text1" @click="goToRegister(2)">《隐私政策》</text>
				</view>
			</view>
			<view class="foot-section">
				<image class="panda" :src="pandaPath" mode="widthFix"></image>
			</view>
			<u-notify message="Hi uView" :show="show"></u-notify>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				checked: false,
				logoPath: 'https://www.afbeijing.net/static_resources/assets/logo.png',
				pandaPath: 'https://www.afbeijing.net/static_resources/assets/panada.png',
				isAgreed: false,
				title: '北京法语联盟-青少法语',
				subtitle: '学习法语-体验文化',
				phoneNumber: ''
			}
		},
		onLoad(options) {
		    // 在此处进行初始化操作
			this.checked = false
			this.$music.playBgm({mute:true})
		},
		onShow: function() {
			this.$music.playBgm({mute:true})
		},
		methods: {
			goToRegister(e) {
				switch (e) {
					case 0:
					if(this.checked===false){
						uni.$u.toast('请勾选我已阅读')
						break;
					}else{
						uni.navigateTo({
							url: '/src/views/pageLogin/dengluzhuce/index'
						});
						break;
					}
					case 1:
						uni.navigateTo({
							url: '/src/views/pageLogin/yonghuxieyi/index' // 这里替换成你实际要跳转的页面路径
						});
						break;
					case 2:
						uni.navigateTo({
							url: '/src/views/pageLogin/yinsizhengce/index' // 这里替换成你实际要跳转的页面路径
						});
						break;
					default:
						break;
				}
			},
			// checkbox() {
			// 	console.log(1)
			// 	this.checked = !this.checked
			// },
			checkboxGroupChange() {
				console.log(2)
				this.checked = !this.checked
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/static/styles/variables.scss";
	.login-page-wrapper {
		height: 100vh;
		width: 100vw;
		background-color: #ffb607;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.login-page {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.top-section {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.logo-container {
		padding-top: 35%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.logo {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 50rpx;
	}
	.title-col {
		text-align: center;
	}
	.title {
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 48rpx;
		color: #FFFFFF;
		line-height: 60rpx;
	}
	
	.subtitle {
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 60rpx;
		white-space: nowrap;
	}
	.middle-section {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.login-row {
		margin: 0;
	}

	.login-btn {
		text-align: center;
		width: 500rpx;
		height: 56rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #A84E0C;
		line-height: 56rpx;
	}
	
	.agreement {
		background-color: #FFD851; // 设置你想要的背景色，这里示例为浅灰色，可替换为实际需要的颜色值
		border-radius: 100rpx; // 设置圆角为100px，可根据需求调整数值大小
		display: flex;
		justify-content: center; // 水平居中
		align-items: center; // 垂直居中
		margin-top: 40rpx;
		text-align: center;
		width: 500rpx;
		height: 40rpx;
		background: #FFD851;
		border-radius: 20rpx;
	}
	.text0 {
		padding-right: 10rpx;
	}
	.text {
		font-weight: 400;
		font-size: 20rpx;
		color: #9F6028;
		line-height: 50rpx;
	}
	
	.text1 {
		font-weight: 400;
		font-size: 20rpx;
		color: #583516;
		line-height: 50rpx;
	}

	.foot-section {
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.panda {
		background-color: #ffb607;
		width: 100%;
		height: 200rpx;
		bottom: 0;
	}
</style>